<!doctype html>
<html lang="zh-cn">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!--ie开启edge内核-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--国产浏览器开启webkit内核-->
	<meta name="renderer" content="webkit">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.2.1/css/bootstrap.min.css">

	<title>Hello, world!</title>
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<!--<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">-->
	<!--<div class="carousel-inner">-->
		<!--<div class="carousel-item active">-->
			<!--<img class="d-block w-100" src="https://code.aliyun.com/dollarkiller/Common_component/raw/master/tutuweb/img/1.png" alt="First slide">-->
		<!--</div>-->
		<!--<div class="carousel-item">-->
			<!--<img class="d-block w-100" src="https://code.aliyun.com/dollarkiller/Common_component/raw/master/tutuweb/img/0.jpg" alt="Second slide">-->
		<!--</div>-->
	<!--</div>-->
	<!--<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">-->
		<!--<span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
		<!--<span class="sr-only">Previous</span>-->
	<!--</a>-->
	<!--<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">-->
		<!--<span class="carousel-control-next-icon" aria-hidden="true"></span>-->
		<!--<span class="sr-only">Next</span>-->
	<!--</a>-->
<!--</div>-->

<!-- <script src="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.css">
<div id="dplayer"></div>
<script>
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        screenshot: true,
        video: {
            url: 'https://video.doratv.club/down/Doraemon/%5BYGSUB%5D%5B2016.01.29%5D%5B429%5D%5BHDTV%5D%5BX264.MP4%5D.MP4',
        }
    });
</script> -->

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>

  <body>
	<div class="ms">
			<div id="player"></div>
	</div>
	<script>
	  var player = new Clappr.Player({source: "https://video.doratv.club/down/Doraemon/%5BYGSUB%5D%5B2016.01.29%5D%5B429%5D%5BHDTV%5D%5BX264.MP4%5D.MP4", parentId: "#player"});
	</script>
  </body>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr@3.4.8/dist/plyr.css">
  <script src="https://cdn.jsdelivr.net/npm/plyr@3.4.8/dist/plyr.min.js"></script>
  
<style>
*{
	/* background: red */
}
#player{
	margin-right: 500px;
}
.ms{
	width: 500px;
	height: 500px;
	background: red;
	margin: 0 auto;
}
</style>
  <!-- <video  id="players" playsinline controls>
    <source src="https://video.doratv.club/down/Doraemon/%5BYGSUB%5D%5B2016.01.29%5D%5B429%5D%5BHDTV%5D%5BX264.MP4%5D.MP4" type="video/mp4">
</video> -->
<!-- <script>
document.addEventListener('DOMContentLoaded', () => { 
  // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
  const player = new Plyr('#player');
  
  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, false);
  }

  // Play
  on('.js-play', 'click', () => { 
    player.play();
  });

  // Pause
  on('.js-pause', 'click', () => { 
    player.pause();
  });

  // Stop
  on('.js-stop', 'click', () => { 
    player.stop();
  });

  // Rewind
  on('.js-rewind', 'click', () => { 
    player.rewind();
  });

  // Forward
  on('.js-forward', 'click', () => { 
    player.forward();
  });
});
</script> -->
<!-- Optional JavaScript -->

</body>
</html>